<!DOCTYPE html>
<!-- 提前写好控制类 和样式 -->
<html class="light" style="color-scheme: light;">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			:root {
				--transition-time: 0.5s;
				--transition-time-c: 0.3s;
			}
			html, body {
				transition: var(--transition-time);
			}
			/* 样式控制 */
			.customize {
				transition: var(--transition-time);
				width: 100px;
				height: auto;
				padding: 10px;
				border-radius: 5px;
				margin-top: 10px;
			}
			.light .customize {
				color: #333;
				background-color: #eee;
			}
			.dark .customize {
				color: #efefef;
				background-color: #666;
			}
		</style>
	</head>
	<body>
		<div>
			<p>我是系统控制的样式</p>
			<input type="text">
			<button class="cutover-btn">点击切换</button>
			<div class="customize">
				我是自定义的文字样式
			</div>
			<a href="https://juejin.cn/post/7368413086955225124#heading-2">https://juejin.cn/post/7368413086955225124#heading-2</a>
		</div>
		<script>
			let isLight = true;
			const cutoverBtn = document.querySelector('.cutover-btn');
			const HTML = document.querySelector('html');
			
			cutoverBtn.onclick = () => {
				isLight = !isLight;
				// 控制系统样式变化
				HTML.setAttribute('style', `color-scheme: ${isLight ? 'light' : 'dark'};`);
				// 控制自定义样式变化
				HTML.setAttribute('class', `${isLight ? 'light' : 'dark'}`);
			}
			
		</script>
	</body>
</html>